<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>天气预报</title>
	<link rel="stylesheet" href="css/tianqi.css" />
</head>

<body>
	<div class="wrap" id="app">
		<!-- 头部 -->
		<div class="search_form">
			<div class="logo"><img src="img/logo.png" alt="logo" />
			</div>
			<!-- 输入框 -->
			<div class="form_group">
				<input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="f1()" />
				<button class="input_sub" @click="f1()">
					搜 索
				</button>
			</div>
			<!-- 候选城市 -->
			<div class="hotkey">
				<a href="javascript:;" @click="f2('中山')">中山</a>
				<a href="javascript:;" @click="f2('北京')">北京</a>
				<a href="javascript:;" @click="f2('上海')">上海</a>
				<a href="javascript:;" @click="f2('广州')">广州</a>
				<a href="javascript:;" @click="f2('深圳')">深圳</a>
			</div>
		</div>
		<h1 v-html="city+'天气'"></h1>

		<div class="weather_list">
			<ul>
				<!-- 重复 遍历 -->
				<li v-for="(item,index) in ws">
					<div class="info_type">
						<span class="iconfont">{{item.type}}</span>
					</div>

					<div class="info_temp">
						<b>{{item.low}}</b>
						~
						<b>{{item.high}}</b>
					</div>

					<div class="info_date"><span>{{item.date}}</span></div>
					<div class="info_fengxiang">风向：{{item.fengxiang}}</div>
					<div class="info_fengli">风力：{{item.fengli}}</div>
				</li>
			</ul>
			<!-- 注意感冒 -->
			<p class="zhuyi">{{ganmao}}</p>
		</div>
	</div>

</body>
<!-- vue库 -->
<script src="./js/vue.js"></script>
<!-- 网络请求库 -->
<script src="./js/axios.js"></script>
<!-- 自己的js -->
<script src="./js/tianqi.js"></script>

</html>